<template>
	<!-- 
		软件定制开发:Q949330222
		9年全栈经验
	 -->
	<view style="overflow-x: hidden">
		<image class="bg" :src="'https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/' + bg + '.jpg'" mode="scaleToFill"></image>
		<view class="center searchDiv">
			<fa-icon type="search" size="18" color="#fff"></fa-icon>
			<input @blur="cityInput"  class="input" type="text" v-model="address" placeholder="请输入城市名,快速查询天气" placeholder-style="color:#fff" />
		</view>
		<scroll-view v-if="isShow_cityScroll" scroll-y="true" class="scroll">
			<view class="scrollItem" v-for="(item,index) in cityScrollList" :key="index" @click="citySelect(index)">
				{{item.adm1+' - '+item.adm2+' - '+item.name}}
			</view>
		</scroll-view>
		<view class="center addressDiv">
			<view class="address" @click="getInfo">
				<view>{{ city }}</view>
				<fa-icon type="rotate-right" size="18" color="#fff" style="margin-left: 20rpx"></fa-icon>
			</view>
		</view>
		<view class="center updateTime">{{ formatTime(weather_now.obsTime) }} 更新</view>
		<view class="center wenduDiv">
			<view class="wendu">
				<view class="wendu-test">{{ weather_now.temp }}</view>
				<view class="wendu-icon">℃</view>
			</view>
			<view class="cond_txt">
				<image :src="weather_icon" style="width: 100rpx; height: 100rpx" mode=""></image>
				{{ weather_now.text }}
			</view>
			<view v-if="weather_day && weather_day.length" style="display: flex; justify-content: space-between; color: #ffffff; font-size: 24px">
				<view style="font-size: 24rpx;display: flex;justify-content: center;align-items;align-items:baseline;">
					<view>日出</view>
					<view style="font-size: 18px; margin-left: 5px">{{ weather_day[0].sunrise }}</view>
				</view>
				<view style="font-size: 24rpx; display: flex; justify-content: center; align-items: baseline">
					<view>日落</view>
					<view style="font-size: 18px; margin-left: 5px">{{ weather_day[0].sunset }}</view>
				</view>
			</view>
		</view>
		<view class="nowinfo">
			<view class="nowinfo-cell">
				<view class="test-desc">体感温度(℃)</view>
				<view class="test-val">{{ weather_now.feelsLike }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">温度(℃)</view>
				<view class="test-val">{{ weather_now.temp }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风向</view>
				<view class="test-val">{{ weather_now.windDir }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风力(级)</view>
				<view class="test-val">{{ weather_now.windScale }}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="nowinfoDiv">
			<view class="nowinfo">
				<view class="nowinfo-cell">
					<view class="test-desc">云量</view>
					<view class="test-val">{{ weather_now.cloud }}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">降水量(mm)</view>
					<view class="test-val">{{ weather_now.precip }}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">能见度(km)</view>
					<view class="test-val">{{ weather_now.vis }}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">相对湿度(%)</view>
					<view class="test-val">{{ weather_now.humidity }}</view>
				</view>
			</view>
		</view>

		<view class="maxTitle">未来天气</view>
		<view class="line"></view>
		<view class="day7">
			<template v-for="day in weather_day">
				<view class="oneday">
					<view class="">{{ day.fxDate }}</view>
					<view class="">{{ day.tempMax }}~{{ day.tempMin }}℃</view>
					<view class="">
						{{ day.textDay }}
						<image v-bind:src="'https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/' + day.iconDay + '.png'"></image>
					</view>
					<view class="">{{ day.windDirDay + day.windScaleDay }}级</view>
				</view>
			</template>
		</view>

		<view class="maxTitle">生活指数</view>
		<view class="line"></view>
		<view class="lifeRowDiv">
			<template v-for="item in lifestyle">
				<view v-if="item.type == '8'" class="lifeRow lifeRow1">
					<view class="imgDiv"><image src="../../../static/img/shushidu.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">舒适度 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '2'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/xiche.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">洗车 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '3'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/chuanyi.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">穿衣 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '9'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/ganmao.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">感冒 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '1'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/yundong.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">运动 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '5'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/ziwaixian.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">紫外线 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '9'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/kongqizhiliang.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">空气污染 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '14'" class="lifeRow">
					<view class="imgDiv"><image src="../../../static/img/taiyang.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">晾晒 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view style="margin: 0px 20rpx; position: relative"><view class="lifeRowLine"></view></view>
			</template>
		</view>

		<view style="height: 20px; width: 100%"></view>
	</view>
</template>

<script>
// import Helper from '@/utils/helper.js';
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
export default {
	components: {
		faIcon
	},
	data() {
		return {
			bg: 1,
			weather_now: {},
			lifestyle: [],
			city: '',
			weather_day: {},
			location: {
				longitude:'',
				latitude:''
			},
			address: '',
			weather_icon: '',
			isShow_cityScroll:false,
			cityScrollList:[],
		};
	},
	async onShow() {
		this.bg = Math.round(Math.random() * 3) + 1;
	},
	async onLoad() {
		  // #ifdef H5
      uni.request({
				url:"https://restapi.amap.com/v3/ip",
				data: {
					key:"659ec305521a06cd1c5f37ff53e4192e"
				},
				success: (res) => {
					if(res.data.status==1){
						this.location.latitude = res.data.rectangle.split(';')[0].split(',')[1]
						this.location.longitude = res.data.rectangle.split(';')[0].split(',')[0]
						this.city = res.data.city
						this.getInfo();
					}else{
						uni.showToast({
							title: '获取定位失败！'
						});
					}
				}
			})
			// #endif
			// #ifndef H5
			this.location.latitude = 40.84213
			this.location.longitude = 111.74881
			this.city = "呼和浩特"
			this.getInfo();
			// #endif
	},
	methods: {
		formatTime(timestamp) {
			var date = new Date(timestamp); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		getInfo() {
			uni.showLoading()
			uni.request({
				url:"https://devapi.qweather.com/v7/weather/now",
				data: {
					location:this.location.longitude + ',' + this.location.latitude,
					key:"e8ae64e405ed447f9a947b017e9a2540"
				},
				success: (res) => {
					if (res.data.code==200) {
						this.weather_now = res.data.now;
					}
				}
			})
			uni.request({
				url:"https://devapi.qweather.com/v7/weather/3d",
				data: {
					location:this.location.longitude + ',' + this.location.latitude,
					key:"e8ae64e405ed447f9a947b017e9a2540"
				},
				success: (res) => {
					if (res.data.code==200) {
						this.weather_day = res.data.daily;
					}
				}
			})
			uni.request({
				url:"https://devapi.qweather.com/v7/indices/1d",
				data: {
					location:this.location.longitude + ',' + this.location.latitude,
					key:"e8ae64e405ed447f9a947b017e9a2540",
					type:0
				},
				success: (res) => {
					if (res.data.code==200) {
						this.lifestyle = res.data.daily;
					}
				}
			})
			uni.hideLoading()
		},
		cityInput(e){
			if(this.address){
				this.isShow_cityScroll = true
				uni.request({
					url:"https://geoapi.qweather.com/v2/city/lookup",
					data: {
						location:this.address,
						key:"e8ae64e405ed447f9a947b017e9a2540"
					},
					success: (res) => {
						console.log(res);
						if (res.data.code==200) {
							this.cityScrollList = res.data.location
						}
					}
				})
			}else{
				this.isShow_cityScroll = false
			}
			
		},
		citySelect(index){
			let info = this.cityScrollList[index]
			this.city = info.name
			this.location.longitude = info.lon
			this.location.latitude = info.lat
			this.isShow_cityScroll = false
			this.address = ''
			this.getInfo()
		}
	}
};
</script>

<style lang="less">
view {
	z-index: 9;
}



.createby {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	height: 60rpx;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	padding-bottom: 60rpx;
}

.bg {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
}

.center {
	width: 85%;
	margin: 0 auto;
	position: relative;
}

.searchDiv {
	position: relative;
	display: flex;
	padding: 10rpx 0px;
	align-items: center;
	color: #ffffff;
	box-sizing: border-box;
	padding-left: 20rpx;
	border: 1px solid #eee;
	border-radius: 10rpx;
	margin-top: 30rpx;
}

.searchDiv > .input {
	outline: 0;
	padding: 10rpx;
	padding-left: 30rpx;
	color: #ffffff;
	font-size: 32rpx;
	width: 80%;
}
.scroll{
	position: absolute;
	z-index: 999;
	left: 0;
	right: 0;
	top: 200rpx;
	margin: auto;
	width: 650rpx;
	height: 500rpx;
	background: rgba(255, 255, 255, 0.81);
}
.scrollItem{
	color: #333;
	padding: 30rpx 20rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.line {
	position: relative;
}

.line::after {
	content: '';
	width: 200%;
	height: 1px;
	position: absolute;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
}

.lineCol::after {
	content: '';
	width: 1px;
	height: 200%;
	position: absolute;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
}

.lineRow::after {
	content: '';
	width: 200%;
	height: 1px;
	position: absolute;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
}

.addressDiv {
	display: flex;
	justify-content: space-between;
	color: #ffffff;
	align-items: center;
	padding: 30rpx 0px 10rpx 0;
  
	.address {
		font-size: 58rpx;
		display: flex;
		align-items: center;
	}
}
.updateTime {
	font-size: 28rpx;
	padding-top: 10rpx;
	color: #fff;
}

.wenduDiv {
	padding: 100rpx 0px;
}

.wendu {
	color: #ffffff;
	text-align: center;
	display: flex;
	align-items: flex-start;
	justify-content: center;

	.wendu-test {
		font-size: 170rpx;
	}

	.wendu-icon {
		font-size: 60rpx;
		display: inline-block;
		padding-top: 30rpx;
		padding-left: 20rpx;
	}
}

.cond_txt {
	color: #ffffff;
	margin: auto;
	text-align: center;
	font-size: 48rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.day7 {
	position: relative;
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 26rpx;
	overflow-x: scroll;
	margin-bottom: 60rpx;
	width: 100%;
	.oneday {
		view {
			width: 200rpx;
			padding: 6rpx 0px;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.nowinfoDiv {
	width: 100%;
	margin-bottom: 30px;
}

.nowinfo {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 26rpx;
}

.nowinfo-cell {
	flex: 1;
	text-align: center;
	padding: 26rpx 0px;

	.test-desc {
		margin-bottom: 16rpx;
		display: inline-block;
	}

	.test-val {
		font-size: 24rpx;
	}
}

.maxTitle {
	position: relative;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 30rpx;
	text-align: center;
	line-height: 80rpx;
}

.lifeRowDiv {
	position: relative;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 28rpx;

	.lifeRow {
		padding: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		height: 180rpx;
		box-sizing: border-box;
		position: relative;

		.imgDiv {
			width: 140rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.info {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.lifeTitle {
				font-size: 28rpx;
			}

			.lifeDesc {
				font-size: 24rpx;
			}
		}
	}

	.lifeRowLine {
		position: relative;
	}

	.lifeRowLine::after {
		content: '';
		width: 200%;
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}
}
</style>
